<!DOCTYPE html>

<html>
<head>
<title>Exercise 2: KML Overlays</title>
<script type="text/javascript" src=
"http://maps.googleapis.com/maps/api/js?v=3&sensor=false">
</script>
<script type="text/javascript">
/* *******************************
	Exercise 2: KML Overlays
*/
var map;

var kmlOverlays = [];
kmlOverlays[0] = new google.maps.KmlLayer('http://geocommons.com/overlays/138446.kml',{preserveViewport: true})
kmlOverlays[1] = new google.maps.KmlLayer('http://www.crh.noaa.gov/images/mpx/geo/mndot.kml',{preserveViewport: true});
kmlOverlays[2] = new google.maps.KmlLayer('http://gis.mda.state.mn.us/kml/Wellhead_Protection_Areas.kmz',{preserveViewport: true});

/* *******************************
  Add a toggle states array here to track your layer on/off states
*/

function initialize() {
    var myLatLng = new google.maps.LatLng(46.5, -94.5);
    var myOptions = {
      zoom: 6,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
          
	for (var i = 0; i < kmlOverlays.length; i++) {
		kmlOverlays[i].setMap(map);
	}
}

/* *******************************
  Add 2 functions to handle toggling here
*/

</script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map, #side {
    float: left;
  }
 #side {
  margin-right: 5px;
  padding: 2px 4px;
  text-align: right;
  width: 210px;
  }
  #map {
  width: 750px;
  height: 600px;
  }
</style>
</head>

    <body onload="initialize()">
        <div id="side">
 		<!--  *******************************
		  Add HTML for the TOC/legend here
		-->
        </div>

        <div id="map">
        </div>
    </body>
</html>

